<template>
  <div>
    <el-dialog :visible.sync="formationshow" title="各部门编制表" width="80%">
      <el-container class="allpage" >
        <el-aside style="width: 210px">
          <!-- 组织树-->
          <formation-tree
            :department="department"
            @handleCheckChange="handleCheckChange"
          ></formation-tree>
        </el-aside>

        <el-container>
          <el-header class="tabletitle">
            <span>部门编制表</span>

            <el-button-group style="margin-left: 15px">
              <el-button
                @click="addformation"
                type="success"
                icon="el-icon-plus"
                >新增
              </el-button>

              <el-button
                @click="getFormation(selecarr)"
                type="warning"
                icon="el-icon-refresh"
                >刷新
              </el-button>
            </el-button-group>
          </el-header>

          <!-- 人员信息表-->

          <formation-table
            :tableData="tableData"
            @editformation="editformation"
            @deleteformation="deleteformation"
          >
          </formation-table>
        </el-container>
      </el-container>
    </el-dialog>

    <el-dialog
      title="编制信息"
      :visible.sync="formationadd"
      width="60%"
      left
      :append-to-body="true"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item prop="depid" label="部门">
          <el-select
            v-model="form.depid"
            placeholder="请选择"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="item in selectdepartment"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="岗位">
          <el-input v-model="form.post" style="width: 100%"></el-input>
        </el-form-item>

        <el-form-item label="职级">
          <el-input v-model="form.rank" style="width: 100%"></el-input>
        </el-form-item>

        <el-form-item label="数量">
          <el-input
            type="number"
            v-model="form.num"
            style="width: 100%"
          ></el-input>
        </el-form-item>

        <el-form-item v-if="isadd">
          <el-button
            type="primary"
            @click="postformation(0)"
            style="width: 100%"
            >新增</el-button
          >
        </el-form-item>

        <el-form-item v-if="!isadd">
          <el-button
            type="primary"
            @click="postformation(1)"
            style="width: 100%"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style>
.tabletitle {
  max-height: 30px;
  font-size: 25px;
  color: #409eff;
}
.el-aside {
  color: #333;
  background-color: rgb(255, 255, 255);
}
.allpage {
  height: 100%;
}
</style>

<script>
import arrayToTree from "array-to-tree";
import FormationTable from "./FormationTable.vue";
import FormationTree from "./FormationTree.vue";

export default {
  components: { FormationTable, FormationTree },

  props: ["department", "selectdepartment"],

  data() {
    return {
      // table所需数据
      tableData: [], // 总数据

      formationshow: false,

      formationadd: false,

      form: [],

      isadd: "",

      selecarr: [],
    };
  },

  created() {},

  methods: {
    addformation() {
      this.formationadd = true;
      this.isadd = true;
      this.eduform = [];
    },

    editformation(row) {
      this.formationadd = true;
      this.isadd = false;
      this.form = row;
    },

    async postformation(type) {
      let datas = {
        type: type,
        id: this.form.id,
        depid: this.form.depid,
        post: this.form.post,
        rank: this.form.rank,
        num: this.form.num,
      };
      this.$axios
        .post("api/formation/postformation", datas)
        .then((response) => {
          this.$message({
            message: response.data.msg,
            type: "success",
          });
          // if (response.data.msg == "编制信息添加成功") {
          //   this.tableData.push({
          //     id: response.data.id,
          //     depid: this.form.depid,
          //     post: this.form.post,
          //     rank: this.form.rank,
          //     num: this.form.num,
          //   });
          // }
          this.formationadd = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 树形组织点击触发
    handleCheckChange(selectobjp) {
      let selectobj = selectobjp;
      //  提取部门id
      let selecarr = [];
      selectobj.forEach((item) => {
        selecarr.push(item.id);
      });

      this.selecarr=selecarr

      this.getFormation(selecarr);
    },

    //获得人员信息
    async getFormation(selecarr) {
      let datas = { selecarr: selecarr };
      this.$axios
        .post("api/formation/getformation", datas)
        .then((response) => {
          this.tableData = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    async deleteformation(index, row) {
      this.$confirm("是删除该条信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let datas = {
            id: row.id,
          };
          this.$axios
            .post("api/formation/deleteformation", datas)
            .then((response) => {
              this.$message({
                message: response.data.msg,
                type: "success",
              });
              this.form.splice(index, 1);
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
